<template>
	<view class="page-container edit-needs-container">
		<!-- 背景图 -->
		<view class="top-home">
			<image :src="$img_path('/home/needs/edit-bg.png')" mode="widthFix"></image>
		</view>
		<!-- 内容 -->
		<view class="edit-needs-content">
			<view class="info-box">
				<view class="info-tag">
					<view class="icon">
						<image :src="$img_path('/home/needs/icon-1.png')" mode="widthFix"></image>
					</view>
					<text>爽约包退</text>
				</view>
				<view class="info-tag">
					<view class="icon">
						<image :src="$img_path('/home/needs/icon-2.png')" mode="widthFix"></image>
					</view>
					<text>实名认证</text>
				</view>
				<view class="info-tag">
					<view class="icon">
						<image :src="$img_path('/home/needs/icon-1.png')" mode="widthFix"></image>
					</view>
					<text>爽约包退</text>
				</view>
				<view class="info-tag">
					<view class="icon">
						<image :src="$img_path('/home/needs/icon-3.png')" mode="widthFix"></image>
					</view>
					<text>资质证书</text>
				</view>
			</view>
			<view class="card-box">
				<view class="title">
					<text>您想要哪类服务？</text>
				</view>
				<view class="tags">
					<view :class="['tag', form.fw_type==1 ? 'tag-active' : '' ]" @click="selectFwType(1)">
						<text>保姆</text>
					</view>
					<view :class="['tag', form.fw_type==2 ? 'tag-active' : '' ]" @click="selectFwType(2)">
						<text>护理员</text>
					</view>
				</view>
				<view class="title" style="margin-top: 40rpx;">
					<text>您需要阿姨做什么？</text>
				</view>
				<view class="mt-20">
					<textarea class="textarea" v-model="form.xq" placeholder="多行输入"></textarea>
				</view>
				<view class="display-flex alig space-between margin-top-40">
					<view class="label">
						<text>服务时间</text>
					</view>
					<view class="content" @click="selectTime">
						<text>{{ form.fw_times ? form.fw_times : '请选择阿姨的服务时间' }}</text>
						<view class="icon-24">
							<image :src="$img_path('/home/icon-right.png')" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="display-flex alig space-between margin-top-40">
					<view class="label">
						<text>服务地址</text>
					</view>
					<view class="content one-row" style="max-width: 60%;" @click="openLocation">
						<text>{{form.address ? form.address : '请选择您的服务地址'}}</text>
						<view class="icon-24">
							<image :src="$img_path('/home/icon-right.png')" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="display-flex alig space-between margin-top-40">
					<view class="label">
						<text>详细地址</text>
					</view>
					<view class="content">
						<input type="text" v-model="form.fw_address" style="text-align: right;" placeholder="填写单元/楼层/门牌号" />
					</view>
				</view>
			</view>
			
			<view class="card-box mt-20">
				<view class="title">
					<text>您希望阿姨的工作时间？</text>
				</view>
				<view class="tags">
					<view :class="['tag', form.zjqk==0 ? 'tag-active' : '']" @click="selectGZ(0)">
						<text>均可</text>
					</view>
					<view :class="['tag', form.zjqk==1 ? 'tag-active' : '']" @click="selectGZ(1)">
						<text>住家</text>
					</view>
					<view :class="['tag', form.zjqk==2 ? 'tag-active' : '']" @click="selectGZ(2)">
						<text>白天全班</text>
					</view>
					<view :class="['tag', form.zjqk==3 ? 'tag-active' : '']" @click="selectGZ(3)">
						<text>上午白班</text>
					</view>	
					<view :class="['tag', form.zjqk==4 ? 'tag-active' : '']" @click="selectGZ(4)">
						<text>下午白班</text>
					</view>	
				</view>
			</view>
			
			<view class="card-box mt-20">
				<view class="title">
					<text>您预算给阿姨的月工资？</text>
				</view>
				<view class="display-flex alig space-between margin-top-40" @click="xzOpen">
					<view class="label">
						<text>预算工资</text>
					</view>
					<view class="content">
						<text>{{form.gz ? form.gz : '请选择您的预算工资'}}</text>
						<view class="icon-24">
							<image :src="$img_path('/home/icon-right.png')" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card-box mt-20">
				<view class="title">
					<text>您的信息？</text>
				</view>
				<view class="display-flex alig space-between margin-top-40">
					<view class="label">
						<text>姓名</text>
					</view>
					<view class="content">
						<input type="text" v-model="form.name" style="text-align: right;" placeholder="昵称" />
					</view>
				</view>
			</view>
			
		</view>
		<!-- 固定按钮 -->
		<view class="fixed-box">
			<view class="fixed-btn common-btn-bg-color" @click="submit">
				<text>提交需求</text>
			</view>
		</view>
		<!-- 选择服务时间 -->
		<serviceSelectDateVue ref="serviceSelectDateRef" @confirmTime="confirmTime" />
		<!-- 选择薪资范围弹窗 -->
		<serviceSelectPickerVue ref="serviceSelectPickerRef" title="选择薪资范围" :column="xinziData" @confirm="xzConfirm" @change="xzChange" />
	</view>
</template>

<script>
	const FormData = require('@/utils/formdata/index.js')
	import serviceSelectPickerVue from './components/service-select-picker/service-select-picker.vue'
	import serviceSelectDateVue from './components/service-select-date/service-select-date.vue'
	import {
		getLocation,
		userBmXq
	} from "@/utils/api/serviceApi.js"
	export default {
		components: {
			serviceSelectPickerVue,
			serviceSelectDateVue
		},
		onLoad() {
			// this.$refs.serviceSelectDateRef && this.$refs.serviceSelectDateRef.open()
			this.getUserBmXq()
		},
		data() {
			return {
				xzIndexs: [0, 0],
				xzData: [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000],
				xzValue: [],
				
				form:{
					fw_type:1,
					xq:'',
					address:'',
					fw_address:'',
					city:'',
					district:'',
					lng:'',
					lat:'',
					gz:'',
					name:'',
					zjqk:'0',
					fw_times:''
				}
			}
		},
		computed: {
			xinziData() {
				let two = this.xzData.slice(this.xzIndexs[0] + 1)
				if (two.length <= 0) {
					two = [this.xzData[this.xzData.length -1]]
				}
				return [
					this.xzData,
					two
				]
			}
		},
		methods: {
			// 详情
			getUserBmXq(){
				let formData = new FormData()
				formData.append('type','get')
				userBmXq(formData.getData()).then(res=>{
					if(res.data){
						this.form = res.data
					}
				})
			},
			// 选择时间
			selectTime(){
				this.$refs.serviceSelectDateRef.open()
			},
			confirmTime(val){
				this.form.fw_times = val
			},
			
			// 服务类型
			selectFwType(fw){
				this.form.fw_type = fw
			},
			
			selectGZ(i){
				this.form.zjqk = i
			},
			
			xzOpen() {
				this.$refs.serviceSelectPickerRef.open()
			},
			xzClose() {
				this.$refs.serviceSelectPickerRef.close()
			},
			xzChange(e) {
				console.log("xzChange", e)
				this.xzIndexs = e.index
			},
			xzConfirm(data) {
				console.log("xzConfirm data", data);
				this.xzValue = data
				this.form.gz = data[0]+'-'+data[1]
			},
			
			openLocation() {
				const that = this
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: (res) => {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.chooseLocation({
							latitude: latitude,
							longitude: longitude,
							success: (data) => {
								console.log('success', data);
								getLocation({
									lat: Number(data.latitude.toFixed(6)),
									lng: Number(data.longitude.toFixed(6))
								}).then(res => {
									console.log("res", res)
									const {
										adcode,
										city,
										citycode,
										country,
										district,
										province
									} = res.data.regeocode.addressComponent
									
									this.form.address = res.data.regeocode.formatted_address
									this.form.lat = data.latitude
									this.form.lng = data.longitude
									this.form.city = city
									this.form.district = district
								})
							}
						});
					}
				});
			},
			
			submit(){
				let formData = new FormData()
				formData.append('fw_type',this.form.fw_type)
				formData.append('xq',this.form.xq)
				formData.append('fw_times',this.form.fw_times)
				formData.append('zjqk',this.form.zjqk)
				formData.append('name',this.form.name)
				formData.append('fw_address',this.form.fw_address)
				formData.append('city',this.form.city)
				formData.append('lat',this.form.lat)
				formData.append('lng',this.form.lng)
				formData.append('address',this.form.address)
				formData.append('district',this.form.district)
				formData.append('gz',this.form.gz)
				formData.append('type','set')
				if(this.form.id){
					formData.append('id',this.form.id)
				}
				
				userBmXq(formData.getData()).then(res=>{
					console.log(res,'-')
				})
			},
			
			
		}
	}
</script>

<style scoped lang="scss">
@import "editMyNeeds.scss"
</style>
